<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>demo</title>
<script type="text/javascript"
	src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<style type="text/css">
.car_bg {
    width: 283px;
    overflow: hidden;
    background-color: #FFF;
    border: 1px solid #d9d9d9;
    position: absolute;
    right: -1px;
    top: 38px;
    z-index: 900;
    display: none;
}
</style>
</head>
<body>
	<a href="test?action=toCateView">分类管理</a></br>
	<h1>产品管理</h1>
	<a href="test?action=toProView">新增产品</a></br>
	<input type="text" id="proId" value="745"/>
	<a href="javascript:void(0);" onclick="updPro()">修改产品</a></br>
	<h1>购物车</h1>
	<a href="javascript:void(0);" onmouseover="m1()" onmouseout="m2()">查看购物车</a></br>
	<input type="text" id="cartProId" value="745"/>
	<a href="javascript:void(0);" onclick="addCart()">加入购物车</a></br>
	<a href="javascript:void(0);" onclick="delCart()">清空购物车</a></br>
	<h1>订单信息展示</h1>
	<table>
		<c:forEach items="${requestScope.orders }" var="a1">
		<c:set value="${a1.value }" var="order"></c:set>
			<tr style="background-color: #f7ece8;">
				<td>用户名：${order.loginName }</td>
				<td>订单号：${order.id }</td>
				<td>地址：${order.orderAdd }</td>
				<td>订单价格：${order.cost }</td>
			</tr>
			<tr style="font-weight:bold">
				<td>商品名称</td>
				<td>商品数量</td>
				<td>商品总价</td>
				<td>图片</td>
			</tr>
			<c:forEach items="${order.details }" var="pro">
				<tr>
					<td>${pro.proName }</td>
					<td>${pro.proNum }</td>
					<td>${pro.proTotalCost }</td>
					<td>${pro.proImgUrl }</td>
				</tr>
			</c:forEach>
		</c:forEach>
	</table>
	<h1>文件上传</h1>
	<form action="test?action=saveInfo" method="post" enctype="multipart/form-data" id="infoLogoForm">
		<img alt="呵呵" src="" id="img1" width="180px" height="240px">
		</br>
		文件：<input name="file1" type="file" id="ctn-input-file"/></br>
		文件上传成功路径：<input type="text" name="filePath" id="filePath" size="100px" readonly="readonly"/>
		</br>
		用户名：<input name="uName" type="text"/>
		<div>
			<button type="submit">提交</button>
		</div>
	</form>
	<!-- 购物车 -->
	<div id="cart" class="car_bg">
		<ul id="cart_ul">
		</ul>
	</div>
</body>
<script type="text/javascript">

	//添加购物车
	function addCart(){
		var proId=$("#cartProId").val();
		$.ajax({
	        url: "test?action=addCart",
	        type: 'POST',
	        data: {"proId":proId},
	        dataType:"json",
	        success : function(data) {
	        	alert(data.msg);
	        }
	    });
	}
	
	//查看购物车
	function showCart(){
		$.ajax({
	        url: "test?action=showCart",
	        type: 'POST',
	        cache: false,
	        data: "",
	        dataType:"json",
	        success : function(data) {
	        	$("#cart_ul").empty();
	        	if(typeof(data.data)!="undefined"){
	        		//alert(JSON.stringify(data.data));
	        		for (var i = 0; i < data.data.length; i++) {
	                    var item = data.data[i];
	                    $("#cart_ul").append("<li>"+item.id+"--" + item.name +"￥"+item.price+"*"+item.nums+ "</li>");
	                  }
		        }else{
		        	$("#cart_ul").append("<li>购物车===空</li>");
		        }
	        }
	    });
	}
	
	//查看购物车鼠标移入
	function m1(){
		console.log("in");
		showCart();
		$("#cart").css('display','block');
	}
	
	//查看购物车鼠标移出
	function m2(){
		console.log("out");
		$("#cart").css('display','none');
	}
	
	//清空购物车
	function delCart(){
		$.ajax({
	        url: "test?action=delCart",
	        type: 'POST',
	        cache: false,
	        data: "",
	        dataType:"json",
	        success : function(data) {
	        	alert(data.msg);
	        }
	    });
	}

	//修改产品
	function updPro(){
		var proId=$("#proId").val();
		window.location.href='test?action=toProView&proId='+proId;
	}
	
	// 文件异步上传
	var uploading = false;
	$("#ctn-input-file").on("change", function(){
	    if(uploading){
	        alert("文件正在上传中，请稍候");
	        return false;
	    }
	    //
	    var formData = new FormData();
    	formData.append("file1",$("#ctn-input-file")[0].files[0]);
	    $.ajax({
	        url: "test?action=doUpload",
	        type: 'POST',
	        cache: false,
	        data: formData,
	        processData: false,
	        contentType: false,
	        dataType:"json",
	        beforeSend: function(){
	            uploading = true;
	        },
	        success : function(data) {
	            if (data.code != 0) {
	            	alert(data.msg);
	            } else {
	            	$("#filePath").val(data.data);
	            	$("#img1").attr('src',data.data);
	            }
	            uploading = false;
	        }
	    });
	});
</script>
</html>